<template>
  <div class="MonthSales">
    <EchartBox
      title-name="月销售目标(元)"
      tip="月销售目标120000元"
      num-value="120,000"
    >
      <template #picture>
        <div class="watchTag" :class="tagClass ? 'flex mt-10px' : 'mt-0px'">
          <div class="content" :class="tagClass ? '' : 'mb-0px'">
            <div :class="{ ['mr-20px']: !tagClass }">周同比</div>
            <div><span class="data data-up"></span> 12%</div>
          </div>
          <div class="content">
            <div :class="{ ['mr-20px']: !tagClass }">日环比</div>
            <div><span class="data data-down"></span> 10%</div>
          </div>
        </div>
      </template>
    </EchartBox>
  </div>
</template>

<script setup name="monthlySales">
import EchartBox from './echartBox.vue'

const tagClass = ref(true)
const resizeObserver = ref()
// 监听 picture 自适应class
function watchDIV() {
  const watchTag = document.querySelector('.watchTag')
  if (ResizeObserver) {
    resizeObserver.value = new ResizeObserver(entries => {
      console.log(watchTag.clientWidth, '宽度')
      if (watchTag.clientWidth <= 200) {
        tagClass.value = false
      } else {
        tagClass.value = true
      }
    })
    if (watchTag) {
      resizeObserver.value.observe(watchTag)
    }
  }
}

onMounted(() => {
  watchDIV()
})
onUnmounted(() => {
  resizeObserver.value.disconnect()
})
</script>

<style scoped lang="scss">
.MonthSales {
  height: 100%;
  .data {
    border: 5px solid;
    border-left-color: transparent;
    border-right-color: transparent;
    position: relative;
    margin: 0 5px;
  }
  .data-up {
    border-bottom-color: red;
    border-top-color: transparent;
    top: -11px;
  }
  .data-down {
    border-bottom-color: transparent;
    border-top-color: rgb(75, 198, 128);
    top: 11px;
  }
  .content {
    @apply flex items-center text-14px ml-10px color-#999;
  }
  .wFull {
    @apply;
  }
}
</style>
